<template>
  <div id="collention">
    <template>
      <div class="cic-breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          <el-breadcrumb-item>收集表管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </template>
    <!--视图 -->
    <el-card>
      <template>
        <div>
          <el-row>
            <!-- 搜索信息 start-->
            <el-col :span="2">查询收集表信息:</el-col>

            <el-col :span="4">
              <el-input
                placeholder="请输入信息表标题"
                v-model="queryInfo.collentionTitle"
                clearable
                @clear="getCollentionAllList"
              ></el-input>
            </el-col>
            <el-col :span="3">
              <el-button size="medium" type="primary" @click="getCollentionAllList">查询</el-button>
            </el-col>

            <!-- 搜索信息 end-->
          </el-row>
        </div>
      </template>
      <!-- 收集表详细信息 start-->
      <template>
        <div class="cic-table">
          <el-table :data="collentionList" border>
            <el-table-column type="index" label="序号" width="250"></el-table-column>
            <el-table-column prop="title" label="标题" width="250" highlight-current-row="true"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="250"></el-table-column>
            <el-table-column prop="statusValue" label="状态" width="250"></el-table-column>

            <el-table-column label="权限管理" width="250">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.status==5?false:true" @change="Status(scope.row)"></el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="详细信息" width="150">
              <template slot-scope="scope">
                <el-button type="text" @click="getCollentionInfo(scope.row)">具体内容</el-button>&nbsp;
              </template>
            </el-table-column>
            <el-table-column width="180">
              <template>
                <el-button type="primary">报名情况</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 弹出框 -->
          <el-dialog title="收集表详情" :visible.sync="dialogTableVisible">
            <div class="row1">
              <el-row>
                <el-col>
                  <div class="grid-content bg-purple"></div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <span>报名开始时间：</span>
                    <span v-text="collentionInfoById.startTime"></span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-light">
                    <span>报名截止时间：</span>
                    <span v-text="collentionInfoById.endTime"></span>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <span>发布者：</span>
                    <span v-text="collentionInfoById.realName"></span>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple-light">
                    <span>报名费： &nbsp;</span>
                    <span v-text="collentionInfoById.price"></span>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple-light">
                    <span>报名人数：</span>
                    <span v-text="collentionInfoById.fillNum"></span>
                  </div>
                </el-col>
                <!--    <el-col :span="4">
                  <div class="grid-content bg-purple-light">
                    <span>开始时间：</span>
                    <span>2020/06/13</span>
                  </div>
                </el-col>-->
              </el-row>
            </div>
            <div class="row2">
              <el-row>
                <el-col :span="2">
                  <div class="grid-content bg-purple-light"></div>
                </el-col>
                <el-col :span="22">
                  <div class="grid-content bg-purple-light">
                    <span v-text="collentionInfoById.info"></span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-dialog>
          <!-- 收集表详细信息 end-->
        </div>
      </template>
      <!-- 分页区域 start-->
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="queryInfo.pageSize"
        :current-page="queryInfo.pageNum"
        :total="total"
      ></el-pagination>
      <!-- 分页区域 end-->
    </el-card>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      value: true,

      dialogTableVisible: false,

      // 查询信息收集表的参数列表
      queryInfo: {
        collentionTitle: "",
        // 当前页数
        pageNum: 1,
        // 每页显示的数
        pageSize: 5
      },
      collentionList: [],
      total: 0,
      collentionInfoById: []
    };
  },
  created() {
    this.getCollentionAllList();
  },
  methods: {
    // 查询所有收集表
    getCollentionAllList() {
      this.$get(
        this.$urlPath.collection +
          "/collection/all/" +
          this.queryInfo.pageNum +
          "/" +
          this.queryInfo.pageSize +
          "?title=" +
          this.queryInfo.collentionTitle
      ).then(resp => {
        console.log(resp);
        if (resp.code != 200) {
          return this.$message.error(resp.message);
        }
        // 查询成功保存到collentionList
        this.collentionList = resp.data.list;
        this.total = resp.data.total;
      });
    },
    // 查询收集表详细信息
    getCollentionInfo(CollentionInfo) {
      console.log(CollentionInfo);
      let collectionId = CollentionInfo.collectionId;
      this.$get(
        this.$urlPath.collection + "/collection/info/" + collectionId
      ).then(resp => {
        console.log(resp);
        this.dialogTableVisible = true;
        if (resp.code != 200) {
          return this.$message.error(resp.message);
        }
        // 查询成功保存到collentionList
        this.collentionInfoById = resp.data;
        console.log(this.collentionInfoById);
      });
    },
    // 监听权限开关按钮
    Status(collentionStatus) {
      // console.log(collentionStatus);
      //管理员禁用收集表
      if (collentionStatus.status != 5) {
        let collectionId = collentionStatus.collectionId;
        this.$put_form(
          this.$urlPath.collection +
            "/collection/admin_stopStatus/" +
            collectionId
          // qs.stringify({ collectionId: collectionId })
        ).then(resp => {
          if (resp.code != 200) {
            // console.log(resp);

      return this.$message.error(resp.message);
          }
          console.log(resp);
          // 将状态置为5
          collentionStatus.status = 5;
          collentionStatus.statusValue = "管理员禁用";
          return this.$message.success(resp.message);
        });
      }
      //管理员开启收集表
      if (collentionStatus.status == 5) {
        let collectionId = collentionStatus.collectionId;
        this.$put_form(
          this.$urlPath.collection +
            "/collection/admin_openStatus/" +
            collectionId
          // qs.stringify({ collectionId: collectionId })
        ).then(resp => {
          if (resp.code != 200) {
            // console.log(resp);
            return this.$message.error(resp.message)
          }
          console.log(resp);
          // 将状态置为4
          collentionStatus.status = 4;
          collentionStatus.statusValue = "教师禁用";
          return this.$message.success(resp.message);
        });
      }
    },
    // 监听页码变化
    handleCurrentChange(newPage) {
      console.log(newPage);
      this.queryInfo.pageNum = newPage;
      this.getCollentionAllList();
    }
  }
};
</script>

<style lang="less" >
#collention {
  @import "../../assets/less/golbal.less";

  .row-bg {
    padding: 10px 0;
  }
  .el-dialog {
    width: 55% !important;
  }
  .row2 {
    margin-top: 20px;
    text-align: left !important;
  }
}
</style>